<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.2">
        </script>
        <script type="text/javascript">
            document.write('<script type="text/javascript" src="../src/snapshotcontrol' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
        </script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var snapShotControl;
            
            function initialize() {
              // add control
              snapShotControl = new SnapShotControl({
                hidden: true
              });
              directionsDisplay = new google.maps.DirectionsRenderer();
              var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var myOptions = {
                zoom: 6,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: chicago
              }
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              directionsDisplay.setMap(map);
              snapShotControl.setMap(map);
            }
            
            function calcRoute() {
              var start = document.getElementById("start").value;
              var end = document.getElementById("end").value;
              var waypts = [];
              var checkboxArray = document.getElementById("waypoints");
              for (var i = 0; i < checkboxArray.length; i++) {
                if (checkboxArray.options[i].selected == true) {
                  waypts.push({
                    location: checkboxArray[i].value,
                    stopover: true
                  });
                }
              }
              
              var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
              };
              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                  var route = response.routes[0];
                  var summaryPanel = document.getElementById("directions_panel");
                  summaryPanel.innerHTML = "";
                  // For each route, display summary information.
                  for (var i = 0; i < route.legs.length; i++) {
                    var routeSegment = i + 1;
                    summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                    summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                    summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
                    summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
                  }
                }
              });
            }
            
            function capture() {
              var options = {};
              var start = document.getElementById("start").value;
              var end = document.getElementById("end").value;
              var checkboxArray = document.getElementById("waypoints");
              options.popupLabelHtml = start + " &gt;";
              for (var i = 0; i < checkboxArray.length; i++) {
                if (checkboxArray.options[i].selected == true) {
                  options.popupLabelHtml += checkboxArray[i].innerHTML + " &gt;";
                }
              }
              options.popupLabelHtml += end;
              
              //static map size
              var sizeStr = document.getElementById("mapSize").value;
              var imgSize = null;
              if (sizeStr != "") {
                var sizeArray = sizeStr.split("x");
                imgSize = new google.maps.Size(sizeArray[0], sizeArray[1]);
              }
              options.size = imgSize;
              
              options.mapType = document.getElementById("mapType").value;
              options.format = document.getElementById("imgFormat").value;
              
              var adjustZoom = false;
              if (document.getElementById("adjustZoom").checked) {
                adjustZoom = true;
              }
              options.adjustZoom = adjustZoom;
              
              var adjustCenter = false;
              if (document.getElementById("adjustCenter").checked) {
                adjustCenter = true;
              }
              options.adjustCenter = adjustCenter;
              
              var usePolylineEncode = false;
              if (document.getElementById("usePolylineEncode").checked) {
                usePolylineEncode = true;
              }
              options.usePolylineEncode = usePolylineEncode;
              
              snapShotControl.showPopup(options);
            }
        </script>
    </head>
    <body onload="initialize();">
        <div id="map_canvas" style="float:left;width:70%;height:100%;">
        </div>
        <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
            <div style="margin:20px;border-width:2px;">
                <h3>Step1: Do direction</h3>
                <b>Start:</b>
                <select id="start">
                    <option value="Halifax, NS">Halifax, NS</option>
                    <option value="Boston, MA">Boston, MA</option>
                    <option value="New York, NY">New York, NY</option>
                    <option value="Miami, FL">Miami, FL</option>
                </select>
                <br/>
                <b>Waypoints:</b>
                <br/>
                <i>(Ctrl-Click for multiple selection)</i>
                <br/>
                <select multiple id="waypoints">
                    <option value="montreal, quebec">
                    Montreal, QBC
                    </input>
                    <option value="toronto, ont">
                    Toronto, ONT
                    </input>
                    <option value="chicago, il">
                    Chicago
                    </input>
                    <option value="winnipeg, mb">
                    Winnipeg
                    </input>
                    <option value="fargo, nd">
                    Fargo
                    </input>
                    <option value="calgary, ab">
                    Calgary
                    </input>
                    <option value="spokane, wa">
                    Spokane
                    </input>
                </select>
                <br/>
                <b>End:</b>
                <select id="end">
                    <option value="Vancouver, BC">Vancouver, BC</option>
                    <option value="Seattle, WA">Seattle, WA</option>
                    <option value="San Francisco, CA">San Francisco, CA</option>
                    <option value="Los Angeles, CA">Los Angeles, CA</option>
                </select>
                <br/>
                <input type="submit" onclick="calcRoute();"/>
                <br/>
                <hr size="1"><h3>Step2: Take a capture</h3>
                <h3>Options:</h3>
                Size:
                <select id="mapSize">
                    <option value="">Same map size</option>
                    <option value="200x200">200 x 200</option>
                    <option value="200x300">200 x 300</option>
                    <option value="200x400">200 x 400</option>
                    <option value="300x200">300 x 200</option>
                    <option value="300x300">300 x 300</option>
                    <option value="300x400">300 x 400</option>
                    <option value="400x200">400 x 200</option>
                    <option value="400x300">400 x 300</option>
                    <option value="400x400">400 x 400</option>
                    <option value="500x500">500 x 500</option>
                    <option value="600x600">600 x 600</option>
                    <option value="640x640">640 x 640</option>
                </select>
                <br>
                Map type:
                <select id="mapType">
                    <option value="">autodetect</option>
                    <option value="roadmap">roadmap</option>
                    <option value="satellite">satellite</option>
                    <option value="hybrid">hybrid</option>
                    <option value="terrain">terrain</option>
                </select>
                <br>
                Image format:
                <select id="imgFormat">
                    <option value="gif">gif</option>
                    <option value="jpg">jpeg</option>
                    <option value="jpg-baseline">jpg-baseline</option>
                    <option value="png" selected>png8</option>
                    <option value="png32">png32</option>
                </select>
                <br/>
                Polyline encode:<input type="checkbox" id="usePolylineEncode" value="true" checked>
                <br/>
                Adjust zoom<input type="checkbox" id="adjustZoom" value="true" checked>
                <br/>
                Adjust center position<input type="checkbox" id="adjustCenter" value="true" checked>
                <br/>
                <input type="submit" onclick="capture();" value="Snapshot"/>
                </div><hr size="1">
                <div id="directions_panel" style="margin:20px;background-color:#FFEE77;">
                </div>
            </div>
        </body>
    </html>
